Photo on charlesproxy.com
Charles 是在電腦上運行的 Web Proxy (HTTP Proxy / HTTP Monitor)
將 Web 瀏覽器（或 Internet application）配置為通過 Charles 訪問 Internet
然後 Charles 可以透過記錄和顯示所有發送和接收的數據
在 Web 和 Internet 開發中 無法得知 Client 端與 Server 間發送和接收的內容
但是透過 Charles 的設定就可以輕鬆查看發生的情況
讓調試變得快速且可靠從而節省時間
補充說明：
Charles 是一個收費的軟體，雖然可以免費試用，但是每次啟動都需要等待 10 秒鐘，並且每次使用時間不能超過 30 分鐘。因此如果需要長時間進行封包調適時，會因為 Charles 強制關閉而遇到影響。
前往 Charles 的官方網站進行安裝
Download a Free Trial of Charles • Charles Web Debugging Proxy可以依照自己的作業系統進行安裝
以下內容將使用 MacOS 做操作分享下載完成後點選檔案將其解壓縮
就完成安裝囉～ ٩ʕ•͡וʔ۶
安裝完 Charles 後就可以來看看 Charles 的 GUI 介面了
Charles 選項欄中提供相當多的功能
File, Edit, View, Proxy, Tools, Window, Help
而其中又以 Proxy 與 Tools 內容的功能較為常用
以下將進一步分享 Proxy 中所提供的功能
Start/Stop Recording
開始/停止 捕獲請求
Start/Stop SSL Proxying
開始/停止 SSL 代理
Start/Stop Throttling
開始/停止 網速節流
Enable/Disable Breakpoints
開啟/關閉 斷點
Recording Settings
進一步設定捕獲請求的內容
此設定的內容將在 Start Recording 時被執行
可以透過 Import/Export 來匯入匯出設定內容
而其中設定的內容分成了三個
Recording size limits：
可以設定捕獲請求的最大限制
當捕獲請求超過限制 Charles 將會通知並停止錄製
Limit recording history：
可以設定歷史捕獲請求的最大限制
當歷史捕獲請求超過限制 Charles 將會自行清除舊的捕獲請求
Limit WebSocket transaction history：
可以設定歷史 WebSocket 的最大限制
當歷史 WebSocket 超過限制 Charles 將會自行清除舊的捕獲請求
SSL Proxying Settings
進一步設定 SSL 代理的內容
此設定的內容將在 Start Proxying Settings 時被執行
Charles 將會顯示 SSL 請求和回傳的純文本內容
可以透過 Include/Exclude 設定匹配的位址
也可以直接在想要啟用 SSL 代理的請求點擊右鍵選擇 Enable SSL Proxying
Throttle Settings
進一步設定網速節流的內容 換句話說就是模擬網速
此設定的內容將在 Start Throttle Settings 時被執行
可以透過 Import/Export 來匯入匯出設定內容
"Only for selected hosts" 可以只想模擬指定網站的網速
Breakpoint Settings
進一步設定斷點的內容
此設定的內容將在 Enable Breakpoints 時被執行
可以透過 Import/Export 來匯入匯出設定內容
也可以透過 Add 填入需要監控的資訊，就可以達到設置斷點的目的了
設定斷點後可以用來觀察或修改 請求/返回 的內容
也可以直接在想要設定斷點的請求點擊右鍵選擇 Breakpoints 來設定斷點
Reverse Proxies Settings
進一步設定反向代理的內容
可以透過 Import/Export 來匯入匯出設定內容
也可以透過 Add 填入新增反向代理的資訊
反向代理是在 Local 端上創建 Web server
該 server 透明的將請求代理到遠程 Web server
反向代理上請求和回傳內容都可以被記錄在 Charles
如果 Client 端應用程序不支援使用 HTTP 代理或不想配置為使用代理
那就可以透過反向代理 將 Client 應用程序連接到 Local 端
Port Forwarding Settings
進一步設定端口轉發的內容
可以透過 Import/Export 來匯入匯出設定內容
也可以透過 Add 填入新增端口轉發的資訊
可以將任何 TCP/IP 或 UDP 設為端口轉發工具從 Charles 轉發到遠程主機
在 Macromedia Flash 中調試 XMLSocket 連接時，這特別有用
還可以將 Charles 當作 SOCKS 代理，因此無需設置端口轉發
macOS Proxy
開啟/關閉 記錄電腦上的所有請求
如果想要抓取電腦請求，勾選 macOS Proxy 選項即可
如果只要抓取手機請求，則取消勾選 macOS Proxy 選項
Proxy Settings
進一步設定代理的內容
代理端口預設為 8888 (可以編輯)
勾選 "Use a dynamic port" 可以開啟使用動態連接端口
勾選 "Enable transparent HTTP proxying" 就可以在 Charles 上開啟代理
Access Control Settings
進一步設定訪問控制的內容
可以透過 Import/Export 來匯入匯出設定內容
訪問控制列表列出可以使用此 Charles instance
通常是在自己的電腦上運行 Charles 因此 local 始終包含在訪問控制列表中
也可以透過 Add 填入允許訪問的 IP 來新增 IP 訪問 Charles 的權限
External Proxy Settings
進一步設定外部代理的內容
可以透過 Import/Export 來匯入匯出設定內容
如果網路上有個代理服務器必須使用該代理服務器才能訪問 Internet
此時就可以將 Charles 配置為在嘗試訪問 Internet 時使用現有代理
可以配置單獨的代理地址和端口：
Web Interface Settings
進一步設定 Web 介面的內容
可以透過 Import/Export 來匯入匯出設定內容
勾選 "Enable the web interface" 來啟用 Web 介面
並透過 http://control.charles 來訪問 Web 介面
Web 介面可以用來控制 Charles 也可以作為 Web 服務使用外部程序
透過 Web 介面也可以近一步達成自動化 Charles (像是 Selenium)
以上是這週的 Charles 內容
主要分享了安裝與選項欄中的 Proxy 功能
下週主要會以選項欄中的 Tools 功能做分享
因為小弟也是新手使用的分享文
所以介紹的內容可能有遺漏或是錯誤，還請各位大哥大姐提點
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ
官方網站 (載點)
相關文章
Ron Hsieh
iThome鐵人賽
看影片追技術